import React,{useEffect,useState} from "react";
import { Text,SafeAreaView,ImageBackground, FlatList,View,StyleSheet,TouchableHighlight,Image,TouchableOpacity, Linking,ScrollView, Alert,RefreshControl } from "react-native";
import * as S from "../Home/styles";
import { useFocusEffect, useRoute } from '@react-navigation/native';
import { Avatar,Modal, HStack, Center, NativeBaseProvider ,ChevronRightIcon,useToast,ArrowBackIcon,CloseIcon,} from "native-base";
import { /*RFValue*/ } from "react-native-responsive-fontsize";
import Icon from 'react-native-vector-icons/Ionicons';
import { useGlobal } from '../../utils/GlobalContext';
import { timePlannerDetail } from "../../services/user";
import { ItemClick } from "native-base/lib/typescript/components/composites/Typeahead/useTypeahead/types";
import Clipboard from '@react-native-clipboard/clipboard';
import { showToast } from "../../utils/toast";

// import WeChatCopyMadal from '../../components/WeChatCopyMadal'


const Title = ({navigation}:any)=>{
  return(
    
    <View style={styles.titleBox}>
      <TouchableOpacity
        style={styles.backBtn}
        onPress={() => {
          navigation.goBack()
        }}
      >
        <ArrowBackIcon size="5" />
      </TouchableOpacity>
      {/* <Text style={styles.titlText}>时间规划师</Text> */}
    </View>
  )
}

const PageDetal = ({route}:any)=>{
  const [modalVisible, setModalVisible] = useState(false);
  
  

  const [pageData,setPageData] = useState({})


  const loadData = ()=>{
    let obj = {
      id:route.params.id
    }
    timePlannerDetail(obj).then(res=>{
      console.log(res)
      setPageData(res.data)
    })
  }

  useEffect(() => {
    loadData()
  }, []);

  return(
    <View>
      <View style={styles.user}>
        <Avatar style={{ width:72,height:72,borderRadius:100,marginRight:24}}  source={{
          uri: pageData.avatar
          }}>
          <Image style={{ width:72,height:72,borderRadius:100}} source={require("../../assets/images/profile/avatar_default.png")} alt="" />
        </Avatar>
        <View>
          <Text style={styles.textName}>{pageData.name}</Text>
          <Text style={styles.textLocation}>{pageData.location}</Text>
        </View>
      </View>

      <View style={styles.moneyBox}>
        <View style={styles.moneyBoxLeft}>
          <Image style={{ width:20,height:20}} source={require("../../assets/images/profile/icon_menoy.png")} alt="" />
          <View style={styles.leftTextbox}>
            <Text style={styles.leftTextboxOne}>{pageData.salary || 0}</Text>
            <Text style={styles.leftTextboxTwo}>/时</Text>
          </View>
        </View>
        <TouchableOpacity onPress={()=>{
          setModalVisible(true)
        }}>
          <View style={styles.moneyBoxRight}>
            <Image style={{ width:20,height:15}} source={require("../../assets/images/profile/icon_wechat_2.png")} alt="" />
            <Text style={styles.bottomRightText}>微信</Text>
          </View>
        </TouchableOpacity>
      </View>
      
      <View style={[styles.descBox,styles.descBoxOne]}>
        <View style={styles.descBoxTitle}>
          <Image style={{ width:20,height:20}} source={require("../../assets/images/profile/icon_desc.png")} alt="" />
          <Text style={styles.descBoxTitleText}>简介</Text>
        </View>
        <Text style={styles.descBoxText}>{pageData.description}</Text>
      </View>
      <View style={[styles.descBox]}>
        <View style={styles.descBoxTitle}>
          <Image style={{ width:20,height:20}} source={require("../../assets/images/profile/icon_excel.png")} alt="" />
          <Text style={styles.descBoxTitleText}>擅长话题/领域</Text>
        </View>
        <Text style={styles.descBoxText}>{pageData.beGoodAt}</Text>
      </View>
      <View style={[styles.descBox]}>
        <View style={styles.descBoxTitle}>
          <Image style={{ width:20,height:20}} source={require("../../assets/images/profile/icon_selfdesc.png")} alt="" />
          <Text style={styles.descBoxTitleText}>自我描述及接单意向</Text>
        </View>
        <Text style={styles.descBoxText}>{pageData.selfDescription}</Text>
      </View>

      <WeChatCopyMadal setModalVisible={setModalVisible} wechat={pageData.wechat} modalVisible={modalVisible} />



    </View>
  )
}


const WeChatCopyMadal = ({modalVisible,setModalVisible,wechat}:any)=>{
  const toast = useToast();
  
  return(
    <Modal
        isOpen={modalVisible}
        onClose={()=>{setModalVisible(false)}}
      >
        <View style={styles2.centeredView2}>
          <View style={styles2.modalView}>
            <View style={styles2.title}>
              <Text style={styles2.titleText}>微信号</Text>
              <TouchableOpacity onPress={()=>{setModalVisible(false)}}>
                <View style={styles2.closeBtn}>
                  <CloseIcon  size={5}/>
                </View>
              </TouchableOpacity>
            </View>
            <View style={styles2.viewBox}>
              <Text style={styles2.viewBoxText}>{wechat}</Text>
              <TouchableOpacity onPress={()=>{
                Clipboard.setString(wechat)
                setModalVisible(false)
                // toast.show({
                //   description: "复制成功",
                //   placement: "top"
                // })
                showToast("", "", "复制成功");
                
              }}>
                <View style={styles2.copyBtn}>
                  <Text style={styles2.copyBtnText}>复制</Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    
  )
}







const PlannerDetail = ({navigation,route}:any) => {
  


 
  

  return (
    <ImageBackground
      source={require("../../assets/images/profile/plannerBg.jpg")}
      style={styles.background}
    >
      <NativeBaseProvider>
      {/* <S.GrayContainer> */}
      <SafeAreaView style={{paddingTop:20,height:'100%'}}>
        
          <View style={styles.container}>
            <Title navigation={navigation}/>
            <ScrollView style={{height:'100%'}}>
              <PageDetal route={route}/>
            </ScrollView>
          </View>
          
        
        
      </SafeAreaView>
      {/* </S.GrayContainer> */}
      </NativeBaseProvider>
  </ImageBackground>
      
  );
};

export default PlannerDetail;
const styles = StyleSheet.create({
  background:{
    flex: 1,
    resizeMode: 'cover', // 设置图片填充方式
    // justifyContent: 'center',
  },
  container:{
    // paddingHorizontal:18,
    paddingBottom:40
  },
  titleBox:{
    width:'100%',
    position:'relative',
    alignItems:'center',
    height:40,
    justifyContent:"center",
    marginBottom:16,
  },
  backBtn:{
    position:'absolute',
    left:16,
    backgroundColor:'#fff',
    width:40,
    height:40,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:100,
    
    shadowColor: Platform.OS === 'android' ? '' : 'rgba(0, 0, 0, 0.08)', // 阴影颜色
    shadowOffset: { width: 0, height: 2 }, // 阴影偏移
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 8, // 阴影半径
    elevation: 3, // 阴影深度
  },
  titlText:{
    fontSize:16,
    fontWeight:'600',
    color:'#000000'
  },
  user:{
    flexDirection:'row',
    paddingHorizontal:24,
    marginTop:6,
    alignItems:'center',
    marginBottom:24,
  },
  textName:{
    color:'#000000',
    fontSize:18,
    fontWeight:'700',
    fontFamily:'HarmonyOS Sans SC',
    marginBottom:8,
  },
  textLocation:{
    color:'#8E8E93',
    fontSize:14,
    fontFamily:'HarmonyOS Sans SC',
  },
  moneyBox:{
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between',
    paddingVertical:16,
    paddingHorizontal:24,
    backgroundColor:'rgba(255, 255, 255, 0.4)',
    borderTopLeftRadius:24,
    borderTopRightRadius:24,
    paddingBottom:40
  },
  moneyBoxLeft:{
    flexDirection:'row',
    alignItems:'center'
  },
  leftTextbox:{
    flexDirection:'row',
    alignItems:'flex-end',
    marginLeft:5,
  },
  moneyBoxRight:{
    flexDirection:'row',
    width:80,
    height:32,
    alignItems:'center',
    justifyContent:'center',
    borderRadius:8,
    backgroundColor:'rgba(10, 189, 56, 0.16)'

  },
  bottomRightText:{
    fontSize:14,
    color:'#0ABD38',
    fontFamily:'HarmonyOS Sans SC',
    fontWeight:'700',
    marginLeft:6,
  },
  leftTextboxOne:{
    fontSize:18,
    color:'#414F66',
    fontFamily:'HarmonyOS Sans SC',
    lineHeight:20,
  },
  leftTextboxTwo:{
    fontSize:14,
    color:'#8E8E93',
    fontFamily:'HarmonyOS Sans SC',
    lineHeight:20,
  },
  descBox:{
    padding:16,
    paddingBottom:24,
    backgroundColor:'#fff',
    borderTopWidth:4,
    borderColor:'#F4F4F4'
  },
  descBoxOne:{
    marginTop:-24,
    borderTopLeftRadius:16,
    borderTopRightRadius:16,
    borderTopWidth:0,
  },
  descBoxTitle:{
    flexDirection:'row',
    alignItems:'center',
    marginBottom:12
  },
  descBoxTitleText:{
    fontSize:16,
    fontFamily:'HarmonyOS Sans SC',
    color:'#000000',
    fontWeight:'700',
    marginLeft:4,
  },
  descBoxText:{
    color:'#48484A',
    fontFamily:'HarmonyOS Sans SC',
    fontSize:15,
    lineHeight:22,
    fontWeight:'400'
  },
})
const styles2 = StyleSheet.create({
  centeredView2: {
    width:'100%',
    justifyContent: "center",
    alignItems: "center",
    // backgroundColor: 'rgba(0,0,0,.6)',
    padding: 20,
  },
  modalView: {
    margin: 20,
    // width:'90%',
    backgroundColor: "#fff",
    borderRadius: 20,
    overflow: "hidden",
    alignItems: "center",
    shadowColor: "#000",
    justifyContent: 'center',
    width: '100%',
    padding:16,
    // width:290)
  },
  title:{
    width: '100%',
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between'
  },
  viewBox:{
    width: '100%',
    flexDirection:'row',
    justifyContent:'space-between',
    marginTop:16,
    paddingVertical:12,
    paddingHorizontal:16,
    backgroundColor:'#F4F4F4',
    borderRadius:8,
    alignItems:'center'
  },
  titleText:{
    color:'#2C2C2E',
    fontSize:18,
    fontWeight:'700',
    fontFamily:'HarmonyOS Sans SC',
  },
  closeBtn:{
    width:40,
    height:40,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor:'#F5F5F5',
    borderRadius:100,
  },
  viewBoxText:{
    color:'#2C2C2E',
    fontSize:16,
    fontFamily:'HarmonyOS Sans SC',
  },
  copyBtn:{
    // width:36,
    // height:28,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor:'#C6E0F7',
    borderRadius:4,
    paddingVertical:8,
    paddingHorizontal:10,
  },
  copyBtnText:{
    color:'#4A4A4A',
    fontSize:14,
    fontFamily:'HarmonyOS Sans SC',
    fontWeight:'700'
  },
});